<template>
  <div class="container">
      <div class="header">
          <div class="header-text">民航实时监视系统</div>
      </div>
      <div style="height: 892px;">
          <div id="CesiumMapId" style="height: 100%;"></div>
      </div>
      <Pop ref="popDialog">
        <template v-slot:title>当日实时目标列表</template>
        <template v-slot:content>
                <!-- 添加滚动容器 -->
                <div class="tree-scroll-container">
                    <el-tree :data="depts" :props="defaultProps"  default-expand-all>
                        <template v-slot="{ data }">
                            <el-row type="flex" justify="space-between" align="middle">
                                <el-col :span="18">{{ data.name }}</el-col>
                                <!-- <el-col :span="6" style="right: 4px;">
                                  <i class="iconfont" style="color: red;">&#xe626;</i>
                                </el-col> -->
                            </el-row>
                        </template>
                    </el-tree>
                </div>
            </template>
      </Pop>
      <div class="right-content">
          <div class="content-list">
              <div class="list-turnback list"  @click="turnBackHandle">
                  <i class="iconfont">&#xe626;</i>
                  <div class="text">归心</div>
              </div>
              <div class="list-change list">
                  <i class="iconfont">&#xe80c;</i>
                  <div class="text  map" @click="toggleMapSelect">切换地图</div>
                  <el-select
                      v-model="maptileChange"
                      @change="mapTileChange"
                       :placement="'bottom-start'"
                      placeholder="请选择"
                      class="custom-map-select" 
                      v-if="isMapSelectVisible"
                  >
                      <el-option
                          v-for="item in mapTileSourceOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      ></el-option>
                  </el-select>
              </div>
          </div>
      </div>
      <div class="layout-footer">
          <div class="nav-list">
              <div class="btn-item" :class="{ active: currentActiveButton === 'dictionary' }" @click="handleButtonClick('dictionary')">字典维护</div>
              <div class="btn-item" :class="{ active: currentActiveButton === 'monitor' }" @click="handleButtonClick('monitor')">实时监视</div>
              <div class="btn-item" :class="{ active: currentActiveButton === 'history' }" @click="handleButtonClick('history')">历史回放</div>
          </div>
      </div>
  </div>
</template>

<script>
import { generateFlatTreeData, groupBy } from '../../utils/data';
export default {
  data() {
      return {
           depts:[],
           defaultProps: {
        label: 'name',
        children: 'children'
      },
          currentActiveButton: 'monitor',
          viewer: null,
          maptileChange: '本地地图',
          mapTileSourceOptions: [
              { label: "初始地图", value: "初始地图" },
              {
                  label: "ArcGIS(内置)",
                  value: "ArcGIS(内置)",
              },
              {
                  label: "OSM(内置)",
                  value: "OSM(内置)",
              },
              {
                  label: "Google地图",
                  value: "Google地图",
              },
              {
                  label: "OSM",
                  value: "OSM",
              },
              {
                  label: "本地地图",
                  value: "本地地图",
              },
          ],
          isMapSelectVisible: false,
      };
  },
  mounted() {
    this.$nextTick(() => {
          this.$refs.popDialog.open();
      });
      this.initMap();
      this.mapTileChange("本地地图");
      let obj =generateFlatTreeData(100)
      // console.log(obj);
      let countries=obj.countries
      let flatData=obj.data
      // console.log(countries);
      // console.log(flatData);
      this.depts = this.transformToTree(countries, flatData);
      
      
  },
  beforeDestroy() {
  if (this.viewer) {
    this.viewer.destroy();
    this.viewer = null;
  }
},
  methods: {
    //第一层国家
   transformToTree(countries,flatData){
      let arr1=countries.map(item => ({
        name:item.name,
        children:this.processAirlines(item.code,flatData)
      })) 
      console.log('第一层',arr1);
      return arr1
    },
    //航空公司
    processAirlines(countryCode,flatData){
      //过滤，每一项的countryCode和传进来的countryCode是否相等
      const filtered=flatData.filter(item =>item.countryCode===countryCode);
      console.log(filtered);
      //在过滤出来的对象中根据航空公司进行分组
      const lineGroup =groupBy(filtered,'airline');
      return Object.entries(lineGroup).map(([airlineName,airLineData])=>({
        name:airlineName,
        children:this.processAircraftTypes(airLineData)
      }))
    },
    processAircraftTypes(airLineData){
      const typegroup =groupBy(airLineData,'aircraftTypes');
      return Object.entries(typegroup).map(([typeName,typeData]) => ({
        name:typeName,
        children:typeData.map(item =>({
          name:item.regNum
        }))
      }))
    },
      initMap() {
          let token =
              "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZTJiMmYxOC1iYTY2LTRiMWItYTdjMi0yNGU1MGI0YzRmMTAiLCJpZCI6Mjg4MTM5LCJpYXQiOjE3NDMwNDI5NzJ9.H9k1_iTjUvg5sEEhIeOyivv5wYyjykqltv4NyPiArgk";
          Cesium.Ion.defaultAccessToken = token;
          this.viewer = new Cesium.Viewer('CesiumMapId', {
              animation: false,
              timeline: false,
              fullscreenButton: false,
              vrButton: false,
              geocoder: false,
              homeButton: false,
              sceneModePicker: false,
              baseLayerPicker: false,
              navigationHelpButton: false,
              infoBox: false,
              selectionIndicator: false,
          });
          this.viewer.camera.setView({
              destination: Cesium.Cartesian3.fromDegrees(104.0654, 30.5775, 3000000)
          });
      },
      mapTileChange(val) {
          this.viewer.imageryLayers.removeAll();
          let mapProvider;
          switch (val) {
              case "初始地图":
                  mapProvider = Cesium.createWorldImagery();
                  break;
              case "ArcGIS(内置)":
                  mapProvider = new Cesium.ArcGisMapServerImageryProvider({
                      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
                      layers: "0",
                  });
                  break;
              case "OSM(内置)":
                  mapProvider = new Cesium.OpenStreetMapImageryProvider({
                      url: "https://{s}.tile.openstreetmap.org",
                  });
                  break;
              case "Google地图":
                  mapProvider = new Cesium.UrlTemplateImageryProvider({
                      assetId: "googleMapTile",
                      url: "http://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
                      subdomains: ["0", "1", "2", "3"],
                      credit: "Google Maps",
                  });
                  break;
              case "OSM":
                  mapProvider = new Cesium.UrlTemplateImageryProvider({
                      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                      subdomains: ["a", "b", "c"],
                      credit: "OpenStreetMap Contributors",
                      minimumLevel: 0,
                      maximumLevel: 19,
                  });
                  break;
              case "本地地图":
                  mapProvider = new Cesium.UrlTemplateImageryProvider({
                      url: "mapTile/{z}/{x}/{y}.png",
                      minimumLevel: 0,
                      maximumLevel: 10,
                  });
                  break;
              default:
                  mapProvider = Cesium.createWorldImagery();
                  break;
          }
          if (!mapProvider) return;
          this.viewer.imageryLayers.addImageryProvider(mapProvider);
          this.isMapSelectVisible = false; // 选择后隐藏下拉框
      },
      turnBackHandle() {
          this.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(104.0654, 30.5775, 3000000),
              duration: 2,
              maximumHeight: 3000000
          });
      },
      toggleMapSelect() {
          this.isMapSelectVisible = !this.isMapSelectVisible;
      },
      handleButtonClick(type) {
          this.currentActiveButton = type;
          switch (type) {
              case 'dictionary':
                  this.$router.push('/pagination');
                  break;
              case 'monitor':
                  this.$router.push('/ssjs');
                  break;
                  case 'history':
        this.$router.push('/hist');
        break;
          }
      }
  }
};
</script>

<style lang="scss" scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 120%;
}
.header{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-image: url('../../assets/images/layout/header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .header-text{
      position: absolute;
      color: white;
      font-size: 24px;
      font-weight: 700;
      left: 700px;
      width: 200px;
  }
}
.app-container {
    padding: 10px;
    font-size: 14px;
}
/* 树形控件基础样式 */
::v-deep .el-tree {
  background: transparent !important;
  height: 100%;
  overflow-y: auto !important;
  color: #febb01;
  scrollbar-color: #1394f0 transparent;
}
::v-deep .content .tree-box .el-tree .el-tree-node .el-tree-node__content .custom-tree-node .isLeaf{
  color: white;
}
// ::v-deep .el-tree-node__content{
//    color: white;
// }
/* 节点内容样式 */
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  padding-left: 12px !important;
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content,
::v-deep .el-tree-node:active > .el-tree-node__content {
  background-color: rgba(255, 255, 255, 0.2) !important; /* 点击后半透明白色 */

}
/* 悬停效果 */
::v-deep .el-tree-node:hover > .el-tree-node__content {
  background-color: rgba(100, 106, 124, 0.2) !important;
  border-radius: 4px;
}

// ::v-deep .el-tree-node:hover .el-tree-node__children {
//   background-color: rgba(111, 134, 165, 0.1) !important;
// }

/* 展开图标样式 */
::v-deep .el-tree-node__expand-icon {
  color: #ffd700;
  margin-right: 8px;
}

/* 滚动条样式 */
::v-deep .el-tree::-webkit-scrollbar {
  width: 8px;
}
::v-deep .el-tree-node__children {
  margin-left: 24px !important; /* 增加缩进距离 */
  padding-left: 0 !important; /* 重置可能的默认内边距 */
}

/* 确保子节点内容正确继承缩进 */
::v-deep .el-tree-node__children .el-tree-node__content {
  padding-left: 12px !important; /* 子节点内容内边距 */
}
::v-deep .el-tree::-webkit-scrollbar-thumb {
  background-color: #ffd700;
  border-radius: 10px;
}

::v-deep .el-tree::-webkit-scrollbar-track {
  background: transparent;
}
.tree-manager {
    width: 50px;
    display: inline-block;
    margin: 10px;
}
.pop-container {
  max-height: 80vh; /* 弹窗最大高度 */
  overflow: auto;
}
/* 新增滚动容器样式 */
.tree-scroll-container {
    height: 90%; /* 设置固定高度 */
    overflow-y: auto; /* 垂直滚动 */
    padding:0;
    background: transparent !important;
}
#CesiumMapId {
  flex: 1; /* 地图占据剩余空间 */
}
::v-deep {
  .el-select .el-select-dropdown {
    background: transparent !important;
    /* 额外优化：清除下拉框阴影 */
    box-shadow: none !important; 
  }
}
.right-content{
  background-color: rgba(1, 20, 47, 0.75);
  top: 50px;
  right: 20px;
  width: 82px;
  height: 152px;
  border: 1px solid #0099ff90;
  position: absolute;
  .content-list{
      margin-top: 10px;
      margin-left: 10px;
      width: 62px;
      height: 132px;
      display: flex;
      flex-direction: column;
      position: relative;
      .list{
          width: 62px;
          height: 61px;
          border:#0798f990 1px solid;
          box-shadow: 0 0 3px #00e5fa;
          position: relative;
          cursor: default;
          transition: all 0.3s ease;
          &:hover{
              box-shadow: 0 0 9px #00e5fa;
              .iconfont{
                  color: #00e5fa; 
              }
              .text{
                  color:#00e5fa;
              }
          }
          .iconfont{
              position: absolute;
              color: white;
              font-size: 23px;
              top: 10px;
              left: 19px;
          }
          .text{
              position: absolute;
              top: 40px;
              left: 20px;
              width: 72px;
              height: 30px;
              color: white;
              font-size: 13px;
          }
          .map{
              left: 6px;
          }
      }
      .list-change{
          margin-top: 10px;
      }
  }
}
::v-deep .el-input el-input--suffix{
  background: transparent;
}
::v-deep .el-select-dropdown.el-popper {
  background: transparent !important;
}

/* 重置下拉菜单内容包裹层背景 */
::v-deep .el-select-dropdown__wrap {
  background: transparent !important;
}

/* 重置下拉选项背景 & 悬停效果 */
::v-deep .el-select-dropdown__item {
  background: transparent !important;
  color: #fff !important; /* 确保文字可见 */
  &:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* 悬停半透明效果 */
  }
}
/* 添加自定义样式 */
.custom-map-select {
  /* 调整下拉框宽度 */
  width: 92px;
  margin-top: 70px;
  margin-left: -13px;

  /* 自定义下拉框位置 */
  .el-select-dropdown {
    /* 调整下拉框距离按钮的位置 */
    margin-left: 62px; 
    margin-top: -61px; 
  }.el-input--suffix .el-input__inner{
  background: transparent !important;
  color: white !important;
}

  /* 防止地图遮挡下拉框 */
  z-index: 2002;
}
.custom-el-select 
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner{
  background: transparent;
  color: white;
}
.layout-footer{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 35px;
  color: white;
  line-height: 35px;
  background-image: url('../../assets/images/layout/footer.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .nav-list{
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      height: 50px;
      width: 330px;
      .btn-item{
          position: relative;
          width: 95px;
          height: 100%;
          background-image: url('../../assets/images/button/normal.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          font-family: cc-font;
          text-align: center;
      }
      .btn-item.active {
          background-image: url('../../assets/images/button/active.png');
      }
  }
}
</style>    